<template>
  <el-dialog
    v-loading="loadding"
    :title="fileName"
    :fullscreen="true"
    :visible.sync="visible"
    :modal="false"
    custom-class="fielDialog"
    @close="$emit('change', false)"
  >
    <div v-if="fileType === 'jpg'" flex>
      <div style="margin-right: 20px;
    padding-right: 20px;
    width:300px;
    border-right: 1px solid #ccc;">
        <div class="margin_bottom_10" flex="main:justify cross:center">
          照片描述：

          <el-link type="primary">保存</el-link>
        </div>
        <el-input v-model="remark" class="margin_bottom_20" type="textarea" :autosize="{ minRows: 6}" />
        <div class="margin_bottom_10">照片录音：{{ fileList.length }}个</div>
        <!-- <el-input v-model="remark" type="textarea" /> -->

        <el-upload
          :action="uploadUrl"
          :headers="headers"
          :show-file-list="false"
          :before-upload="()=>loadding=true"
          :file-list="fileList"
          :on-success="handleOnSuccess">
          <el-button size="mini" type="primary">上传音频</el-button>
          <div slot="tip" class="el-upload__tip">只能上传MP3，AAC，Ogg，Opus等音频文件</div>
        </el-upload>

        <el-divider />
        <div v-for="(item,index) in fileList" :key="index">
          <div>{{ item.name }}</div>
          <video width="280" height="70" controls="" name="media"><source :src="item.url" type="audio/flac"></video>
          <!-- <iframe width="280" height="50" frameborder="0" scrolling="no" src="http://localhost:8065/profile/upload/周杰伦 - 七里香.flac" /> -->
          <!-- <span>demo录音文件.mp3</span>

          <i class="el-icon-video-play" style="font-size:40px" /> -->
        </div>
        <el-empty v-if="!fileList.length" description="暂无音频" />

      </div>
      <div class="flex_1">
        <div flex="main:justify" class="margin_bottom_10">
          <div>上传人：<span>admin</span></div>
          <div>上传日期：<span>2022-10-22</span></div>
        </div>
        <div class="img_box">
          <!-- <iframe
            id="iframe"
            ref="fileIframe"
            :src="fileUrl"
            scrolling="no"
            frameborder="0"
          /> -->
          <img :src="fileUrl" alt="" srcset="" frameborder="0">
        </div>

      </div>

    </div>
    <iframe
      v-else
      ref="fileIframe"
      class="iframe_box"
      :src="`${host}/pdf/web/viewer.html?file=${fileUrl}`"
      frameborder="0"
    />
  </el-dialog>
</template>

<script>
import { getToken } from '@/utils/auth'
export default {
  model: {
    prop: 'show',
    event: 'change'
  },
  props: {
    show: {
      type: Boolean,
      default: false
    },
    pdfOptions: {
      type: Object,
      default: () => ({})
    },
    url: {
      type: String
    }
  },
  data() {
    const _token = this.$route.query.token
    return {
      visible: false,
      remark: '',
      iframeStyle: {
        height: undefined,
        width: undefined
      },
      loadding: false,
      fileList: [],
      uploadUrl: process.env.VUE_APP_BASE_API + '/common/upload', // 上传的图片服务器地址
      headers: {
        Authorization: 'Bearer ' + (getToken() || _token)
      }
    }
  },
  computed: {
    api() {
      return process.env.VUE_APP_BASE_API
    },
    host() {
      return location.origin
    },
    fileUrl() {
      return this.url || this.pdfOptions.url + '?date=' + new Date().getTime()
    },
    fileType() {
      return this.fileUrl.slice(-3)
    },
    fileName() {
      return this.fileUrl.slice(this.fileUrl.lastIndexOf('/') + 1)
    }
  },
  watch: {
    show: {
      handler(val) {
        this.visible = val
      },
      immediate: true
    }
  },
  mounted() {
    // this.$nextTick(() => {
    //   const iframe = document.querySelector('#iframe')
    //   console.log(iframe)
    //   if (iframe.attachEvent) {
    //     iframe.attachEvent('onload', function() {
    //     // iframe加载完毕以后执行操作
    //       console.log('iframe已加载完毕', document.getElementsByTagName('iframe')[0])
    //     })
    //   } else {
    //     iframe.onload = function() {
    //       setTimeout(() => {
    //       // 获取第三方页面的高度
    //         console.log('iframe已加载完毕!', document.getElementsByTagName('iframe')[0].ownerDocument.body.clientHeight)
    //         this.height = iframe.ownerDocument.body.clientHeight
    //         this.width = iframe.ownerDocument.body.clientWidth
    //         console.log(document.getElementsByTagName('iframe'))
    //       }, 1000)
    //     }
    //   }
    // })
  },
  methods: {
    handleGetFileName(url) {
      return url.slice(url.lastIndexOf('/') + 1)
    },
    async jumpToPage(pageNum) {
      this.clearHistory()
      const fileIframe = this.$refs.fileIframe
      this._PDFViewerApplication = fileIframe && fileIframe.contentWindow.PDFViewerApplication
      clearTimeout(this._timer)
      if (!this._PDFViewerApplication || !this._PDFViewerApplication.eventBus) {
        this._timer = setTimeout(() => {
          this.jumpToPage(pageNum)
        }, 500)
      } else {
        this._PDFViewerApplication.page = parseInt(pageNum)
      }
    },
    clearHistory() {
      localStorage.removeItem('pdfjs.history')
    },

    handleOnSuccess(res) {
      // if (!res.data.words_result_num) {
      //   this.$message.warning('无法识别，请上传清晰的证件照片')
      // } else {
      //   const { 姓名: { words: reInquirytorName }, 性别: { words: reInquirytorSex }, 出生: { words: reInquirytorBirth }, 公民身份号码: { words: reInquirytorCardNum }, 住址: { words: reInquirytorAddressOld }} = res.data.words_result
      //   Object.assign(this.obj, { reInquirytorName, reInquirytorSex, reInquirytorBirth: new Date(reInquirytorBirth.slice(0, 4), reInquirytorBirth.slice(4, 6), reInquirytorBirth.slice(6, 8)), reInquirytorCardNum, reInquirytorAddressOld })
      // } this.loadding = false
      this.fileList.push(res.data)
      this.loadding = false
    }
  }
}
</script>

<style lang="scss" scoped>
// .iframe_box{
//   width: 100%;
//   min-height: calc(100vh - 146px);
// }
// .img_box{
//   width: calc(100vw - 342px);
//   height: calc(100vh - 126px);
//   overflow: auto;
// }

</style>
